<script setup>
import { useXmRouter } from '@/stores/XmRouter';

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
});

if (props.title) document.title = unref(props.title);
watch(
  () => props.title,
  (val) => {
    document.title = val;
  }
);

const clickLeft = () => {
  useXmRouter().back();
};
</script>
<template>
  <van-nav-bar class="xm-title" :title="title" v-bind="$attrs" @click-left="clickLeft">
    <template #right>
      <slot name="right"> </slot>
    </template>
  </van-nav-bar>
</template>

<style lang="stylus" scoped>
.xm-title
  padding-top constant(safe-area-inset-top)
  padding-top env(safe-area-inset-top)
  left auto
  width 100%
  max-width var(--max-width)

  :deep(.van-nav-bar__right)
    &:active
      opacity 1
</style>
